<template>
  <div>
    <MyProduct 
    v-for="item in list"
    :key="item.id"
    :title="item.title"
    :price="item.price"
    :id="item.id"
    @kan="kanFn" />
  </div>
</template>

<script>
import MyProduct from './components/MyProduct.vue'
export default {
  components :{
    MyProduct
  },

  data() {
    return {
      list:[
        {id:1,title:'大榴莲',price:80},
        {id:2,title:'大西瓜',price:70},
        {id:3,title:'大菠萝',price:60}
      ]
      
    };
  },


  methods: {
    kanFn(id) {
      //根据id找到对应的元素
      const obj = this.list.find(item => item.id === id)
      obj.price -= 3
      

    }
    
  },
};
</script>

<style lang="scss" scoped>

</style>